<!--  -->
<template>
  <view class="yuan_view">
    <view>
      <view class="img_one">
        <view class="img_one1"></view>
        <view class="img_one2"></view>
      </view>
      <view class="Login">欢迎您，请进行登录</view>
      <view class="Login1">Welcome</view>
    </view>
    <view class="body_view1">
      <view class="uni-form-item uni-column qqqq">
        <view class="title">手机号</view>
        <input class="uni-input" :value="tel" type="number" @input="onKeyInput" placeholder="请在此输入您的手机号" />
      </view>
      <view class="uni-form-item uni-column qqqq1">
        <view class="title">验证码</view>
        <view class="code_q">
          <input class="uni-input" :value="codes" type="number" @input="onKeyInput1" placeholder="请在此输入验证码" />
          <view @click="get_code" v-if="countDownNum==60 || countDownNum==-1 " class="code_text">获取验证码</view>
          <view v-else class="code_text">重新获取({{countDownNum}})</view>
        </view>
      </view>
      <view class="Login_1" @click="Login_1">
        登录
      </view>
    </view>
  </view>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import {
    getCode,
    loginH5
  } from '@/common/request/api.js'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        countDownNum: '60',
        tel: "",
        codes: ''
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      //点击登录时判断手机号验证码是否填写
      Login_1() {
        console.log(this.tel);
        if (this.tel == "") {
          uni.showToast({
            title: '手机号不能为空',
            icon: 'none',
            duration: 2000
          });
        } else if (this.codes == "") {
          uni.showToast({
            title: '验证码不能为空',
            icon: 'none',
            duration: 2000
          });
        } else {
          console.log("8888888888");
          //校验手机号是否正确
          var reg = /^1[3456789]\d{9}$/;
          if (reg.test(this.tel)) {
            this.loginH51()
          } else {
            uni.showToast({
              title: '手机号格式不正确',
              icon: 'none',
              duration: 2000
            });
          }
        }
      },
      //获取手机号
      onKeyInput: function (event) {
        this.tel = event.target.value
      },
      //同步验证码
      onKeyInput1: function (event) {
        this.codes = event.target.value
      },
      //登录接口
      loginH51() {
        loginH5(
          this.tel,
          this.codes
        ).then((res) => {
          console.log(res.data.data);
          if (res.data.code == 200) {
            uni.showToast({
              title: '登录成功',
              icon: 'none',
              duration: 2000
            });

            uni.setStorageSync('tel', this.tel)
            uni.setStorageSync('token', res.data.data)
            //写一个俩秒钟的定时器
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 2000)
          }
        })
      },
      get_code() {
        if (this.tel == "") {
          uni.showToast({
            title: '手机号不能为空',
            icon: 'none',
            duration: 2000
          });
        } else {
          var reg = /^1[3456789]\d{9}$/;
          if (reg.test(this.tel)) {
            getCode(
              this.tel
            ).then((res) => {
              console.log(res.data.data);

              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.data,
                  icon: 'none',
                  duration: 3000
                });
                // uni.showToast({
                //   title: '验证码发送成功',
                //   icon: 'none',
                //   duration: 2000
                // });
              } else {
                uni.showToast({
                  title: '验证码发送失败',
                  icon: 'none',
                  duration: 2000
                });
              }
            })
            var countDownNum = this.countDownNum; // 获取倒计时初始值
            console.log(countDownNum);
            setInterval(() => {
              countDownNum -= 1;
              this.countDownNum = countDownNum
              if (countDownNum <= -1) {
                // clearInterval(timer);
                // 取消置顶的setInterval函数将要执行的代码
                this.countDownNum = 60
              }
            }, 1000)
          } else {
            uni.showToast({
              title: '手机号格式不正确',
              icon: 'none',
              duration: 2000
            });
          }
        }


      }
    },
    beforeCreate() {}, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    beforeMount() {}, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang="less" scoped src="./index.less">

</style>